<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>聊天窗口</title>
</head>
<body>
<div>
  我的用户名：
  <input type="text" th:value="${cid}" readonly="readonly" id="cid"/>
</div>
<div id="chat-windows" style="width: 400px; height: 300px;overflow: scroll;border: blue 1px solid;"></div>
<div>收消息人用户名：<input id="toUserId" name="toUserId" type="text"></div>
<div>输入你要说的话：<input id="contentText" name="contentText" type="text"></div>
<div>
  <button type="button" onclick="sendMessage()">发送消息</button>
</div>
</body>

<script type="text/javascript">
  var socket;
  if (typeof (WebSocket) == "undefined") {
    alert("您的浏览器不支持WebSocket");
  } else {
    console.log("您的浏览器支持WebSocket");
    //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接

    var cid = document.getElementById("cid").value;
    console.log("cid-->" + cid);
    var reqUrl = "http://localhost:8300/websocket/" + cid;
    socket = new WebSocket(reqUrl.replace("http", "ws"));
    //打开事件
    socket.onopen = function () {
      console.log("Socket 已打开");
      //socket.send("这是来自客户端的消息" + location.href + new Date());
    };
    //获得消息事件
    socket.onmessage = function (msg) {
      console.log("onmessage--" + msg.data);
      //发现消息进入    开始处理前端触发逻辑
      var chatWindows = document.getElementById("chat-windows");
      var pElement = document.createElement('p')
      pElement.innerText = msg.data;
      chatWindows.appendChild(pElement);
    };
    //关闭事件
    socket.onclose = function () {
      console.log("Socket已关闭");
    };
    //发生了错误事件
    socket.onerror = function () {
      alert("Socket发生了错误");
      //此时可以尝试刷新页面
    }
    //离开页面时，关闭socket
    //jquery1.8中已经被废弃，3.0中已经移除
    // $(window).unload(function(){
    //     socket.close();
    //});
  }

  function sendMessage() {
    if (typeof (WebSocket) == "undefined") {
      alert("您的浏览器不支持WebSocket");
    } else {
      var toUserId = document.getElementById('toUserId').value;
      var contentText = document.getElementById('cid').value + ":" + document.getElementById('contentText').value;
      var msg = '{"sid":"' + toUserId + '","message":"' + contentText + '"}';
      console.log(msg);
      var chatWindows = document.getElementById("chat-windows");
      var chatWindows = document.getElementById("chat-windows");
      var pElement = document.createElement('p');
      pElement.innerText = "我：" + document.getElementById('contentText').value;
      chatWindows.appendChild(pElement);
      socket.send(msg);
    }
  }

</script>
</html>